<template>
    <div class='ArticleContainer'>
		<div class="banner">
			<img :src="bannerBg" alt="">
		</div>
		<div class="title">
			<span>{{ currentNavObj?.name }}</span>
			<div>About Harmony</div>
		</div>
		<NavBar
		  @change="selectFn"
		  :navList="navbar.children"
		  :current="actived" />
		<div class="content">
			<slot></slot>
		</div>
    </div>
</template>

<script setup lang="ts">
import bannerBg from '@/assets/images/mobile-about-banner-bg.jpeg'
import NavBar from './modules/NavBar.vue'
const props = defineProps({
	navbar:{
		type:Object as () => {
			children:Array<{
				name: string,
				id: number,
			}>,
			name: string,
			id: number
		},
		required:true,
	},
})

const actived = defineModel<number>()
const emits = defineEmits(['change'])
const selectFn = (id:number)=>{
    emits('change',id)
	actived.value = id
}
const currentNavObj = computed(()=>{
	return props.navbar.children?.find(item=>item.id === actived.value) || { name: 'Home', id: 0}
})
// 面包屑文字
const breadCrumb = computed<string>(()=>{
	return '主页 / ' + props.navbar.name + ' / '
})
</script>
<style lang="scss" scoped>
.ArticleContainer{
	.banner{
		height: 214px;
		width:100%;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}
	.title{
		padding: 15px 20px;
		font-size: 23px;
		color: #bbbbbb;
		border-bottom: 1px solid #e8e8e8;
		display: flex;
		align-items:baseline;
		span{
			display: flex;
			justify-content: center;
			align-items: center;
			&::after{
				content: '';
				width: 15px;
				margin: 0 3px;
				display: inline-block;
				height: 26px;
				background: url('@/assets/images/mobile-sep-icon.png');
			}
		}
		div{
			font-size: 15px;
		}
	}
	.content{
		padding: 10px;
	}
}
</style>